<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	
	
	<body>
		<div id="app">
			<!--阻止默认行为   添加-->
			<a href="https://www.baidu.com/" @click.prevent="baidu">百度</a>
			<br />
			<!--按键触发按钮-->
			<!-- 回车键触发事件 -->
            添加:<input name="name" type="text" v-on:keyup.enter="handler"  />
			<br/>
			
			
			空格事件:<input  name="sex"  type="text"  @keydown.space="handler()"/>
			
			删除事件<input  name="gender"   type="text"  @keydown.delete="del()" />
			
			<br /><br />
			
			数据A:<input type="text"  v-model="one"/><br/>
			数据B:<input type="text"  @keydown.enter="add"  v-model="two"/><br />
			总和:<span >{{sum}}</span>
			
			
			
			
		</div>
		
		
		<script  src="../js/vue.js"></script>
		<script>
			const  app=new  Vue({
				el: "#app",
				data: {
					name: "vue案例" ,
					one:  0,
					two: 0,
					sum: 0
				},
				methods:{
					baidu(){
						window.alert("一样");
					},
					handler(){
						console.log("点出来");
					},
					del(){
						console.log("删除");
					},
					add(){
						var ff=Number.parseInt(this.one)+Number.parseInt(this.two);
						
						this.sum=ff;
						
					}
				}
				
			})
			
			
		</script>
	</body>
	
</html>
